<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">hello box</div>
    <script>
      const box = document.getElementById("box");

      box.onclick = function () {
        // 获取box的内容
        const boxContent = this.textContent;
        // 创建textarea 将box中的文字放到 textarea 中
        const textarea = `<textarea onclick="event.stopPropagation();">${boxContent}</textarea>`;
        // const textarea = document.createElement("textarea");
        // textarea.textContent = boxContent;
        // textarea.onclick = function (e) {
        //   e.stopPropagation();
        // };

        // box的内容换成textarea
        // this.append(textarea);
        this.innerHTML = textarea;
        // this.insertAdjacentHTML("beforeend", textarea);
      };

      /*
        1. 点击box
        2. 创建textarea文本框
        3. 将box中的文字放到 textarea 中
        4. 编辑文字
        5. 用户按下回车或失去焦点后，将textare中的文字回填到box中
      */
    </script>
  </body>
</html>
